<template>
  <el-container class="home">
    <el-card header="待办事项" style="flex: none;">
      <el-table :data="todo" style="width: 100%" :show-header="false" @row-click="go" row-class-name="todo-item">
        <el-table-column :resizable="false" prop="label" label="事项" width="180" />
        <el-table-column :resizable="false" prop="count" label="数量" align="right" class-name="red" />
      </el-table>
    </el-card>
    <el-card header="常用操作" style="flex: auto; margin-left: 20px">
      <el-row style="width: 100%;">
        <el-col v-for="(link, index) in links" :key="index" :span="8" class="link">
          <router-link class="wrapper" :title="link.label" :to="link.path">
            <p>{{link.label}}</p>
          </router-link>
        </el-col>
      </el-row>
    </el-card>
  </el-container>
</template>

<script>
  export default {
    name: "home",
    data() {
      return {
        todo: [], // 代办
        links: [], // 常用操作
      };
    },
    mounted() {
      this.getTodo().then(todo => {
        this.todo = todo;
      });
      this.getLinks().then(links => {
        this.links = links;
      });
    },
    methods: {
      go(row) {
        console.log(row);
        this.$router.push("/charts");
      },
      getTodo() {
        return Promise.resolve([{
          label: "新进订单",
          count: 10
        }, {
          label: "待审核客户",
          count: 2
        }, {
          label: "提现申请",
          count: 1
        }]);
      },
      getLinks() {
        return Promise.resolve([{
          label: "图表",
          path: "/charts"
        }, {
          label: "产品发布",
          path: "/charts"
        }, {
          label: "用户审核",
          path: "/charts"
        }, {
          label: "提现",
          path: "/charts"
        }, {
          label: "充值",
          path: "/charts"
        }, {
          label: "竞价",
          path: "/charts"
        }]);
      }
    }
  };
</script>

<style lang="less">
  .home {
    display: flex;
    flex: none;
    overflow: auto;
    margin: -20px;
    padding: 20px;
    background-color: white;
    box-sizing: content-box;
    .el-card__body {
      padding: 10px;
    }
    .link {
      text-align: center;
      margin-bottom: 20px;
      color: inherit;
      .wrapper:hover {
        background-color: #40c1ff;
      }
      .wrapper:active {
        background-color: #409eff;
      }
      .wrapper {
        padding: 40px 10px;
        margin: 10px;
        background-color: #409eff;
        overflow: hidden;
        border-radius: 5px;
        text-overflow: ellipsis;
        box-shadow: 0 2px 12px 0 rgba(102, 177, 255, 0.8);
        white-space: nowrap;
        cursor: pointer;
        display: block;
        text-decoration: none;
        color: #fff;
      }
    }
    .todo-item {
      cursor: pointer;
    }
    .red {
      color: red;
    }
  }
</style>
